<table width="100%" class="table table-striped interactive-reference-list-table"> 
    <thead> 
        <tr>
            <?php
            foreach ($headers as $header) {
                ?> 
                <th> 
                    <?= htmlspecialchars($header["header"]) ?>
                </th>
                <?php
            }
            ?> 
        </tr>
    </thead>
    <?php
    foreach ($elems as $elem) {
        ?> 
        <tr>
            <?php
            foreach ($elem->listView() as $view) {
                ?> 
                <td> 
                    <?= htmlspecialchars($view["value"]) ?>
                </td>
                <?php
            }
            ?> 
            <td>
                <a href="javascript:;" class="interactive-reference-list-edit-button" 
                    elem-id="<?= $elem->id() ?>">Edit</a>
            </td> 
        </tr>
        <?php
    }
    ?>
</table>

<div id="interactive-reference-edit-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Edit</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer"> 
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Update</button>
    </div>
</div>

<script type="text/javascript">

    $(".interactive-reference-list-table .interactive-reference-list-edit-button").on("click", function() {
        $("#interactive-reference-edit-modal").modal({
            show: true, 
            remote: "/vendor/interactive/reference/src/Interactive/Reference/resources/templates/edit.php?id=" + $(this).attr("elem-id") + "&includePath=<?= $includePath ?>"
        });
    }); 

    $("#interactive-reference-edit-modal .modal-footer .btn-primary").on("click", function() { 
        var str = $("#interactive-reference-edit-modal form").serialize();  
        $.post("/vendor/interactive/reference/src/Interactive/Reference/resources/templates/edit2.php?includePath=<?= $includePath ?>", str, function(response) { 
            console.log("foo"); 
        }); 
    });

    $('body').on('hidden', '.modal', function () {
        $(this).removeData('modal');
    });
</script>

